﻿@using TinyContactManager.Web.Controllers
@using TinyContactManager.Web.Internal.Data
@{
    ViewBag.Title = "Contacts";
}

<div class="row-fluid">
    <div class="span3">
        <div class="well sidebar-nav">
            <ul class="nav nav-list">

                <li>
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-search"></i></span>
                        <input type="search" placeholder="Search" style="width: 80%" data-bind="value: mainView.searchText, valueUpdate: 'afterkeyup', value: mainView.searchText" />
                    </div>
                </li>
                <li class="divider"></li>
                <li class="nav-header">Contact Nav</li>
                <!-- ko foreach: mainView.registrations -->
                <li data-bind="css: { active: $data == $parent.mainView.selectedMonth() }">
                    <a href="#" data-bind="text: Month, attr: { href: '#/registrations/'+Month }"></a>
                </li>
                <!-- /ko -->
            </ul>
        </div>
    </div>
    <div class="span9 main-content">
        <div id="view-contacts">
            <div class="row-fluid navbar" style="margin-bottom: 0">
                <div class="navbar-inner">
                    <form class="navbar-form pull-left">
                        <div class="brand">Sort by:</div>
                        <select data-bind="value: sortBy" style="float: left;">
                            <option value="birthday">Birthday</option>
                            <option value="lastName">Last name</option>
                        </select>
                    </form>
                    <div style="float: right">
                        <a class="btn btn-success" href="#" data-bind="click: exportClicked">Export</a>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div style="position: relative">
                    <ul id="source">
                    </ul>

                    <!-- ko with: selectedMonth -->
                    <ul id="destination" class="hidden" data-bind="foreach: ComputedList">
                        <li data-id="" data-bind="attr: { 'data-id': Id }" class="contact">
                            <div class="front">
                                <h4>
                                    <span data-bind="text: FirstName"></span>&nbsp;<span data-bind="text: LastName"></span>
                                </h4>
                                <p>
                                    Is born on <span data-bind="text: moment(Birthday).format('Do MMM')" style="font-weight: 700"></span>
                                    <span data-bind="text: BirthdayFromNow()"></span>
                                </p>
                                <p data-bind="text: Address()"></p>

                                <div style="position: absolute; bottom: 5px">
                                    <img src="~/Images/9.png" style="width: 20px" data-bind="visible: HasBeenSentVoucherThisYear, attr: {title: 'Voucher was sent ' + getTime(HasBeenSentVoucherThisYear).fromNow()}" />
                                    <img src="~/Images/43.png" style="width: 20px" data-bind="visible: HasRedeemedVoucher, attr: {title: 'Voucher was redeemed ' + getTime(HasRedeemedVoucher).fromNow()}" />
                                </div>
                            </div>
                            <div class="back" style="display: none">
                                <strong><span data-bind="text: FirstName"></span>&nbsp;<span data-bind="text: LastName"></span></strong>
                                <div style="margin-top: 40px; text-align: center">
                                    <a href="#" class="btn btn-info"  data-bind="click: $root.editClicked">Edit</a>
                                    <a href="#" class="btn btn-danger" data-bind="click: $root.deleteClicked">Delete</a>
                                    <div style="margin-top: 5px;">
                                        <a href="#" class="btn btn-success" data-bind="click: $root.responded, visible: HasBeenSentVoucherThisYear">Redeemed voucher</a>
                                    </div>
                                </div>
                                <a href="#" class="btn action-btn close btn-inverse">X</a>

                            </div>
                        </li>
                    </ul>
                    <!-- /ko -->
                    <div style="clear: left;"></div>
                </div>
            </div>
        </div>
        <div id="export-contacts" style="display: none;">

            <div class="row-fluid navbar">
                <div class="navbar-inner">
                    <form class="navbar-form pull-left">
                        <a href="#" class="btn" data-bind="click: clearForExport">Cancel</a>
                    </form>
                    <div style="float: right">
                        <a class="btn btn-success" href="#" data-bind="click: confirmExportClicked">Confirm</a>
                    </div>
                </div>
            </div>

            <table class="table table-condensed table-hover table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Birthday</th>
                        <th>Export</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: forExport">
                    <tr>
                        <td><span data-bind="text: FirstName"></span>&nbsp;<span data-bind="text: LastName"></span></td>
                        <td><span data-bind="text: moment(Birthday).format('Do MMM')"></span></td>
                        <td>
                            <input type="checkbox" data-bind="checked: shouldExport" /></td>
                    </tr>
                </tbody>
            </table>
        </div>
       
    </div>
</div>
